<template>
	<view class="spinner">
	  <view class="item" :key="item.delay" v-for="(item, idx) in items" :style="item.style"></view>
	</view>
</template>

<script>
	export default {
		props: {
		    color: {
		      type: String,
		      default: global.PRIMARY_COLOR
		    }
		},
		data() {
			return {
				items:[{
					'background-color': this.color,
					'animation-delay': '200ms'
				}]
			};
		},
		created() {
			var items = [];
			for (var i=0; i<4; i++) {
				var delay = (i + 1) * 200;
				items.push({
					delay: delay,
					style: "background-color:"+ this.color +";animation-delay:"+ delay +"ms"
				})
			}
			this.items = items
		}
	}
</script>

<style scoped>
	.spinner{
	  height: 80upx;
	  width: 100%;
	  z-index: 100;
	  text-align: center;
	  padding: 15upx 0;
	  box-sizing: border-box;
	}
	
	 .spinner .item{
	   height: 50upx;
	   width: 8upx;
	   margin: 0upx 5upx;
	   border-radius: 4upx;
	   display: inline-block;
	   animation:ware 800ms ease 0s infinite both;
	  }
	
	
	@keyframes ware {
	  0%{
	    transform: scale(1, 1);
	    opacity: 1
	  }
	  50%{
	    transform: scale(1,0.5);
	    opacity: 0.5
	  }
	  100%{
	    transform: scale(1, 1);
	    opacity: 1
	  }
	}

</style>
